<template>
	<view v-if="visitData&&showAll">
		<!-- 顶部导航选项卡 -->
		<view class="top-nav flex">
				<view @tap="doSelectNav(0)" class="zcFlex1 f-center" :class="topNavIndex==0?'topNavSelect':''">车辆信息</view>
				<view @tap="doSelectNav(1)" class="zcFlex1 f-center" :class="topNavIndex==1?'topNavSelect':''">车辆照片</view>
		</view>
		<view v-show="topNavIndex==0">
	<!-- 			<view class="form-wrap " >
					<view class="list-info "><view >车牌号：</view> <view class="info-discrib "><input :disabled="inputDisabled" type="text" value="川q12345" /></view> </view>
					<view class="list-info "><view >车主姓名：</view> <view class="info-discrib "><input :disabled="inputDisabled" type="text" value="川q12345" /></view> </view>
					<view class="list-info "><view >车型：</view> <view class="info-discrib "><input :disabled="inputDisabled" type="text" value="川q12345" /></view> </view>
					<view class="list-info "><view >车架号：</view> <view class="info-discrib "><input :disabled="inputDisabled" type="text" value="川q12345" /></view> </view>
					<view class="list-info "><view >初登日期：</view> 
						<view class="info-discrib ">
								<input v-if="false" :disabled="inputDisabled" type="text" value="1333312345" />
								<picker class="input" mode="date"  @change="getPiker($event,'startDate')" :value="startDate">
									<view class="picker-text flex zcJustifyC_end">{{startDate}} <view class="iconfont icon-down-trangle f-center"></view></view>
								</picker>
						</view> 
					</view>
					<view class="list-info "><view >行驶里程：</view> <view class="info-discrib "><input :disabled="inputDisabled" type="text" value="4000km" /></view> </view>
					<view class="list-info "><view >联系人：</view> <view class="info-discrib "><input :disabled="inputDisabled" type="text" value="李四" /></view> </view>
					<view class="list-info "><view >联系电话：</view> <view class="info-discrib "><input :disabled="inputDisabled" type="text" value="1333333333" /></view> </view>
				</view> -->
				<view class="card-info">
					<view class="card-top flex f-side">
						<view class="card-car"><view>{{visitData.VehiclePlateNo}}</view><view>{{visitData.VehicleType||''}}</view></view>
						<view class="card-name"><view>{{visitData.VehicleContact||''}}</view><view>{{visitData.VehicleContactMobile||''}}</view></view>
						<view class="contanct"><view v-if="visitData.VehicleContact">{{visitData.SalesMan||''}}</view></view>
					</view>
					<view class="card-botom flex">
						<view class="flex1  zcRelative"> <view class="f-center">车架号</view><view class="f-center">{{visitData.VehicleVIN||' '}}</view></view>
						<view class="flex1  zcRelative"> <view class="f-center">行驶里程</view><view class="f-center">{{visitData.Mil}}KM</view></view>
						<view class="flex1  zcRelative"> <view class="f-center">初登日期</view><view class="f-center">{{visitData.VehicleRegistryDate}}</view></view>
					</view>
				</view>
				<!-- 客户信息 -->
				<view class="title f-side"  @tap="do_infoShow(0)">跟进历史 <view class="iconfont icon-down-trangle"></view></view>
        <view class="customer-box" v-if="infoShow[0]">
					<block v-for="(item,index) in traceHistory" :key="index">
						<view class="customer-box2">
								<customer :item="item"></customer>
						</view>
					
					</block>
					<view style="height: 80upx;background-color: #fff;" class="f-center" v-if="infoShow[0]&&traceHistory.length==0"> 暂无数据</view>
				</view>
				<!-- 周期列表 -->
				<view class="title f-side itemCenter" @tap="do_infoShow(1)">周期表 <view class="iconfont icon-down-trangle "  ></view></view>
				<view class="cycle-wrap" v-show="infoShow[1]">
					<block v-for="(item,index) in cycleData" :key="index">
						<view class="car-cycle-wrap">
							<cardCycle @addNewCycle='addNewCycle'  :item='item' :canSelect="0"></cardCycle>
						</view>
					</block>
				</view>
				<!-- 近期任务 -->
				<view class="title flex ">近期任务 <view class="add-count f-center">{{visitData.doTraceList.length}}个</view></view>
        <view style="padding-bottom: 130upx;">
					<block v-for="(item,index) in visitData.doTraceList" :key="index">
						<taskRecent :item="item"  @do_changeItem='do_changeItem' :reasonArray="reasonArray"></taskRecent>
					</block>
				</view>
				<!-- 提交按钮 -->
				<view class="btn f-center">
					<zc-button Name="Uni_Partner_Detail" Action="doTrace"  Text="保存车辆信息" @doMakeData="doSubmit_Trace" @doBackData="cbSubmit_Trace"></zc-button>
					<!-- <button type="primary"  @tap="do_submit">登记</button> -->
				</view>
		</view>			
		<view v-show="topNavIndex==1&&VehicleInfoSN">
			<approachDetail  :isArchives="isArchives" :carSN = "VehicleInfoSN"></approachDetail>
		</view>
					<!-- 修改或者添加列表组件 isAddNew=true表示新加-->
		<view v-if='cycleAddShow' class="cycleAddShow">
			<cycleAdd :canSelect="0" :opcity1 ="opcity1" :isAddNew="isAddNew" @do_editCycle="do_editCycle" @do_addCycleSubmit="do_addCycleSubmit"  :cycleEditData="cycleEditData"></cycleAdd>
		</view>
		<!-- 修改列表组件里面的周期选择 -->
		<view class="cycle-select" v-if="cycleSelectShow&&visitData">
			<cycleSelect :orderData="visitData" @get_select="get_select" ></cycleSelect>
		</view>
	</view>
</template>

<script>
	let _this;
	import tabBar from "../../components/tab-bar/tab-bar.vue"
	import approachDetail from '../../components/home-metting/approach-detail.vue'
	import cardCycle from "../../components/home-metting/car-cycle.vue"
	import customer  from "../../components/visit/task_follow_customer.vue"
	import taskRecent  from "../../components/visit/task_follow_recent.vue"
	import cycleAdd from "../../components/home-metting/car-cycle-add.vue"
	import cycleSelect from "../../components/home-metting/select_one_cycle.vue"
	import zcButton from "../../components/button/zc-button.vue"
	export default {
		components:{
			tabBar,
			approachDetail, //车辆照片页面
			cardCycle,   //周期表
			customer,   //客户信息
			taskRecent,  //近期任务
			cycleAdd ,   //编辑周期  
			cycleSelect,  //周期选择
			zcButton
		},
	
		data() {
			return {
				cycleEditData:"",
				orderData:'',
				cycleSelectShow:false ,  //周期项目选择列表显示
				cycleAddShow:false,    //修改组件显示
				isAddNew:false,   //不是新加
				infoShow:[false,false],
				showMore:false,  //控制近期任务第二个往后都不展开
				isArchives:true,
				inputDisabled:false,
				topNavIndex:0,
				startDate:'',
				recentTask:[{name:"0",showMore:false},{name:"1",showMore:false},{name:"2",showMore:false},{name:"3",showMore:false}],
			  TraceTaskSN:'',
				visitData:{}  ,//回访详细信息
				reasonArray:[]  ,//跟进原因汇总
				cycleData:[]   ,//周期列表
				VehicleInfoSN:''  ,//获取周期SN
				showAll:false,
				opcity1:false    ,//控制子组件输入框是否隐藏
				traceHistory:[]  //跟进历史
			}
		},
		created(){
			_this = this ;
			// _this.nextDate=_this.def_date();
			// _this.finishDate=_this.def_date();
			// _this.startDate=_this.def_date();

		},
		onLoad(e){
			console.log('页面参数 = ',e);
			if(e.TraceTaskSN){
				_this.TraceTaskSN = e.TraceTaskSN;
			}
			uni.showLoading({
				title: '页面加载中',
				mask: true
			});
			_this.getDoTraceInfo();	  //获取数据
			_this.QueryTraceResultReasonList();  //获取跟进原因
		},
		methods: {
						//获取回访数据已完成anction:getTraceTask_ListShow  未完成anction:getTraceTask_His_ListShow
						getTraceTask_His_ListShow(){ 
							_this.$ZcPublic.Server.Post({
								IsNeedLogin: true,
								Paras: {
									Name: 'Uni_Partner_Detail',
									Action: 'getTraceTask_His_ListShow',
									Data:{
										D_Max:"",
										D_Min:"",
										D_No:"",
										PageIndex:0,
										Pages:5,
										VehicleInfoSN:_this.VehicleInfoSN
									}
								},
								Callback:_this.cb_getTraceTask_ListShow,
								Scope: _this
							})
						},
						cb_getTraceTask_ListShow(resJson,scope){
						console.log("回访",resJson.data);
							if(resJson.success){
								if(resJson.data instanceof Array &&resJson.data.length>0){
									resJson.data.forEach((item)=>{
										item.ForwardDate=_this.$ZcPublic.formatDate( item.ForwardDate,'yyyy-MM-dd')
									})
								}
								 _this.traceHistory = resJson.data
								}else{
									uni.showModal({
										title:'温馨提示',
										content: resJson.msg,
										showCancel:false
									})
								}
						},
			
			/* 移植过来 */
			do_editCycle(item){ //新加周期进入选择
				_this.opcity1 = true;
				_this.cycleSelectShow = true;
				_this.cycleEditData = item
			},
		get_select(item){
			  _this.opcity1 = false;
				_this.cycleSelectShow = false;
				_this.cycleEditData.Class3 = item.Class3;
				_this.cycleEditData.ItemModelSN = item.SN;
				console.log(item);
			},
						/* 车辆添加编辑周期 */
			addNewCycle(item,type){ //编辑周期
				if(type == "edit"){
					_this.GetPeriodicTable_Edit(item.PeriodicTableSN) //调用此信息接口，数据回来再打开编辑组件
				}else if(type == "delete"){
					uni.showModal({
						title: '温馨提示',
						content: '请确认是否要删除此数据！',
						success:function(res){ 
							if(res.confirm){
									_this.doDelPeriodictTable(item.PeriodicTableSN)
							}
						}
					});
			
				}
			}		,				
			do_addCycleSubmit(item,name){
				if(name == "submit"){
						_this.doSavePeriodicTable(item);  //调用保存接口
				}else{
					_this.cycleAddShow = false
				}
			},
			GetPeriodicTable_Edit(SN){  //获取周期具体信息
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: "GetPeriodicTable_Edit",
						Data: {
							SN:SN
						}
					},
					Callback:_this.cb_GetPeriodicTable_Edit,
					Scope: _this
				})
			},
			cb_GetPeriodicTable_Edit(resJson,scope){
				 	console.log("编辑周期返回数据",resJson)
					if(resJson.success){
						_this.cycleEditData = resJson.data;
						_this.cycleEditData.ExpireDate=_this.$ZcPublic.formatDate( _this.cycleEditData.ExpireDate,'yyyy-MM-dd')
						_this.isAddNew = false;
					  _this.cycleAddShow = true ;
					}else{
							uni.showModal({
								title:'温馨提示',
								content: resJson.msg,
								showCancel:false
							})
					}
			},
			doDelPeriodictTable(SN){  //删除手动添加的周期
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: "doDelPeriodictTable",
						Data: {
							SN:SN
						}
					},
					Callback:_this.cb_doDelPeriodictTable,
					Scope: _this
				})
			},
			cb_doDelPeriodictTable(resJson,scope){
				 	console.log("删除周期返回数据",resJson)
					if(resJson.success){
							uni.showToast({
								title: '删除成功！'
							});
							setTimeout(function() {
							_this.getCarShow_PeriodicTable()
								}, 1200);
					}else{
							uni.showModal({
								title:'温馨提示',
								content: resJson.msg,
								showCancel:false
							})
					}
			},
			doSavePeriodicTable(item){  //保存添加或者修改的周期
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: "doSavePeriodicTable",
						Data: {
							obj:item
						}
					},
					Callback:_this.cb_doSavePeriodicTable,
					Scope: _this
				})
	
			},
			cb_doSavePeriodicTable(resJson,scope){
				 	console.log("添加周期或者新加周期返回",resJson)
					if(resJson.success){
							uni.showToast({
								title: '保存成功！'
							});
							setTimeout(function() {
								_this.cycleAddShow = false;
								}, 1200);
						}else{
							uni.showModal({
								title:'温馨提示',
								content: resJson.msg,
								showCancel:false
							})
					}
			},
			/* 周期列表 */
			getCarShow_PeriodicTable(){  //周期表信息
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: "getCarShow_PeriodicTable",
						Data: {
							SN:_this.VehicleInfoSN
						}
					},
					Callback:_this.cb_getCarShow_PeriodicTable,
					Scope: _this
				})
			},
			cb_getCarShow_PeriodicTable(resJson,scope){
				 	console.log("周期",resJson)
					if(resJson.success){
						// _this.orderData = resJson.data
						 // _this.orderData.VehicleRegistryDate=_this.$ZcPublic.formatDate( _this.orderData.VehicleRegistryDate,'yyyy-MM-dd')
							_this.cycleData = resJson.data
							if( _this.cycleData instanceof Array && _this.cycleData){
								_this.cycleData.forEach((item)=>{
									item.ExpireDate=_this.$ZcPublic.formatDate(item.ExpireDate,'yyyy-MM-dd');
									item.LastDate=_this.$ZcPublic.formatDate(item.LastDate,'yyyy-MM-dd');
								})
							}
					}else{
							uni.showModal({
								title:'温馨提示',
								content: resJson.msg,
								showCancel:false
							})
					}
			},
			/* 保存函数 */
			doSubmit_Trace(para){  //保存函数
				// setTimeout(function() { //用定时器防止修改内容还没变更就发送保存请求
					let _resentArry = [];
					if(_this.visitData.doTraceList instanceof Array && _this.visitData.doTraceList){
						_this.visitData.doTraceList.forEach((item)=>{
							if(item.rTraceResult){
								_resentArry.push(item)
							}
						})
					}
					para.data={
						obj:_resentArry
					}
				// }, 200);

			},
			cbSubmit_Trace(resJson,scope){
				 	console.log("保存",resJson)
					if(resJson.success){
							uni.showToast({
								title: '登记成功！'
							});
							setTimeout(()=>{
								uni.navigateBack();
							},1200)
					}
			},
			getDoTraceInfo(type){  //获取访问详情信息
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: "getDoTraceInfo",
						Data: {
							SN:_this.TraceTaskSN
						}
					},
					Callback:_this.cb_getDoTraceInfo,
					Scope: _this
				})
			},
			cb_getDoTraceInfo(resJson,scope){
				 	console.log("回访详情",resJson)
					if(resJson.success){

						 _this.visitData = resJson.data;
						 _this.VehicleInfoSN = resJson.data.VehicleInfoSN
						 console.log('_this.VehicleInfoSN',_this.VehicleInfoSN);
						 _this.visitData.VehicleRegistryDate=_this.$ZcPublic.formatDate( _this.visitData.VehicleRegistryDate,'yyyy-MM-dd')
					   if(_this.visitData.doTraceList instanceof Array &&_this.visitData.doTraceList){
								_this.visitData.doTraceList.forEach((item,index)=>{
									item.rnextTraceDate = _this.$ZcPublic.formatDate( item.rnextTraceDate,'yyyy-MM-dd');
									item.ForwardDate = _this.$ZcPublic.formatDate( item.ForwardDate,'yyyy-MM-dd');
									item.ExpireDate = _this.$ZcPublic.formatDate( item.ExpireDate,'yyyy-MM-dd');
									item.rTraceResultReasonSN = item.TraceTaskSN;
									item.rnextTraceDate = item.ForwardDate;
									item.rModifyExpireDate = item.ExpireDate;
									item.rContent = item.PrevTraceContent;
									_this.$set(item,"id",index);
						    })
						 }

						_this.showAll=true
						uni.hideLoading();

					}else{
						uni.hideLoading()
							uni.showModal({
								title:'温馨提示',
								content: resJson.msg,
								showCancel:false
							})
					}
			},
			QueryTraceResultReasonList(type){  //获取跟进原因
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: "QueryActivedTraceResultReasonList",
						Data:{}
					},
					Callback:_this.cb_QueryTraceResultReasonList,
					Scope: _this
				})
			},
			cb_QueryTraceResultReasonList(resJson,scope){
				 	console.log("跟进原因总数",resJson)
					if(resJson.success){
						_this.reasonArray = resJson.data
					}else{
							uni.showModal({
								title:'温馨提示',
								content: resJson.msg,
								showCancel:false
							})
					}
			},
			def_date(){
				let _date = new Date(),
						year = _date.getFullYear(),
						month = _date.getMonth() +1,
						day = _date.getDate();
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
					
				return `${year}-${month}-${day}`;
			},
			doSelectNav(index){
				_this.topNavIndex = index;
				if(index == 1){
					_this.VehicleInfoSN = ""
					_this.VehicleInfoSN = _this.visitData.VehicleInfoSN;
				}
			},
			do_submit(){
				console.log("保存")
				_this.doTrace()
			},
			getPiker(e,type){
				console.log(e)
				switch(type){
					case "startDate":
					_this.startDate = e.detail.value;
					break;
				}
			},
			do_changeItem(item){ //跟新组件数据
			console.log('子组件选择',item);
				_this.$set(_this.visitData.doTraceList,item.id,item);
				_this.visitData = JSON.parse(JSON.stringify(_this.visitData))
				console.log(_this.visitData);
			},
			do_infoShow(index){
				console.log(index)
				// _this.infoShow[index] = !_this.infoShow[index]
				_this.$set(_this.infoShow,index,!_this.infoShow[index])
				console.log(_this.infoShow);
				_this.infoShow = JSON.parse(JSON.stringify(_this.infoShow))
				if(index==1){
					_this.getCarShow_PeriodicTable()
				}else if(index==0){
					if(_this.infoShow[0])
					_this.getTraceTask_His_ListShow()
				}
			}
		}
	}
</script>

<style>
.top-nav{
	height: 90upx;
	line-height: 90upx;
	width: 100%;
}
.topNavSelect{
	color: #6CB9FB;
}
.form-wrap{
	background-color: #fff;
	padding: 0 30upx 0 20upx;
}
.list-info,.show-more,.list-bottom{
	height: 80upx;
	line-height: 80upx;
	border-bottom: 1upx solid #F7F7F7;
	display: flex;
}
.list-info>view:nth-of-type(1){
	flex: 0 0 200upx !important;
	flex: 1;
	display: flex;
	align-items: center;
}
.list-info .info-discrib {
	flex: 1;
}
.list-info .info-discrib input,.list-info .info-discrib .input{
	width: 100% !important;
	height: 80upx;
	text-align: right;
	flex: 1;
	line-height: 80upx;
}
.picker-text{
	height:80upx ;
	line-height: 80upx;
	text-align: right;
	
}
.info-bottom-discrib>input{
	text-align: left !important;
}
.show-more{
	width: 100%;
}
.icon-down-trangle,.icon-up2{
	margin-left: 5upx;
	flex: 0 0 0;
}
.title{
	height: 80upx;
	line-height: 80upx;
	padding:0 20upx 0 40upx;
	border-bottom:1upx solid #e5e5e5 ;
}
.list-bottom>view:first-child{
	width: 58% !important;
}
.list-bottom>view>view:nth-of-type(1){
	flex: 0 0 200upx;
}
.btn{
	position: fixed;
	height: 130upx;
	width: 100%;
	background-color: #F4F5F6;
	bottom: 0;
	z-index: 700;
}
.btn view{
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom: 0;
}
.btn button{
	width: 60% ;
	background-color:#50ADFD ;
	color: #fff;
	border-radius: 10upx;
}
.button-hover{
	background-color:#50ADFD !important;
}
.color-grey>input{
	color: #8C8C8C;
}
.bottom-icon-down-trangle{
	margin-left: 80upx;
}
/* 车辆照片导航样式调整 */
	.swiper-tab-list{width: 20%!important;background-color: #FFFFFF;border: none!important;padding: 20upx 0!important;}
		.uni-tab-bar .active{color: #3CA4F9!important;background-color: #FFFFFF;position: relative;text-align: center;}
		.uni-tab-bar .active:after{content: '';position: absolute;width: 25%;height: 5upx;background-color: #3CA4F9;left: 35%;bottom: 0;border-radius: 3upx;}
	.zc-swiper-tab{
		display: flex;
		border: none !important;
		width: 100%;
		background-color: #fff;
	}
	.swiper-tab-list {
		width: 33.3% !important;
	}
	/* 跟进历史 */
.customer-box2:last-child  .customer-wrap{
	margin-bottom: 0 !important;
}

	/* 2019-11-28修改 */
	.card-info{
		background-color: #fff;
		box-shadow: 1upx 1upx 5upx 4upx #EAEDF1;
		border-radius: 10upx;
    margin:0 10upx ;
		overflow: hidden;
	}
	.card-top{
		padding: 10upx 30upx 0 40upx;
		border-bottom: 1upx solid #e5e5e5;
	}
	.card-name>view:first-child,.card-car>view:first-child {
		font-weight: 500;
		font-size: 36upx;
		padding-top: 10upx;
	}
		.card-name>view:nth-of-type(2),.card-car>view:nth-of-type(2){
			position: relative;
			top:-12upx
		}
		.contanct>view{
			padding: 5upx 30upx;
			height: 40upx ;
			line-height: 40upx;
			border-radius: 20upx;
			background-color: #50ADFD;
			color:#fff
		}
		.card-botom{
			padding: 20upx 0;
		}
		.card-botom>view>view:first-child{
			color:#A0A0A0
		}
		.card-botom>view:nth-of-type(1):before,.card-botom>view:nth-of-type(2):before{
			content: '';
			position: absolute;
			width: 1upx;
			height: 80upx;
			right: 0;
			background-color:#e5e5e5 ;
			top:10upx
		}
		.car-cycle{
			margin: 0 10upx 40upx 10upx !important;
		}
		.add-count{
			font-size: 18upx;
			font-weight: 500;
			padding: 0 15upx 4upx 15upx;
			border-radius: 18upx;
			background-color: #DBDBDB;
			height: 27upx;
			margin: 28upx 0 0 15upx ;
		}
		.cycle-select{
			position: fixed;
			width: 100%;
			top:0;
			bottom: 0;
			z-index: 9999;
		}
</style>
